<!-- 自动填充输入框 -->

<template>
  <div class="container-autocomplete">
    <div>
      <h2>基础用法</h2>
      <p>
        fetch-suggestions 属性是返回建议输入的方法。 在此示例中，
        querySearch(queryString, cb) 方法通过 cb(data) 给 Autocomplete
        组件返回建议。
      </p>
      <el-row class="demo-autocomplete">
        <el-col :span="12">
          <div class="sub-title my-2 text-sm text-gray-600">
            list suggestions when activated
          </div>
          <el-autocomplete
            v-model="state1"
            :fetch-suggestions="querySearch"
            clearable
            class="inline-input w-50"
            placeholder="Please Input"
            @select="handleSelect"
          />
        </el-col>
        <el-col :span="12">
          <div class="sub-title my-2 text-sm text-gray-600">
            list suggestions on input
          </div>
          <el-autocomplete
            v-model="state2"
            :fetch-suggestions="querySearch"
            :trigger-on-focus="false"
            clearable
            class="inline-input w-50"
            placeholder="Please Input"
            @select="handleSelect"
          />
        </el-col>
      </el-row>
    </div>
    <div>
      <h2>自定义模版</h2>
      <el-autocomplete
        v-model="state"
        :fetch-suggestions="querySearch"
        popper-class="my-autocomplete"
        placeholder="Please input"
        @select="handleSelect"
      >
        <template #suffix>
          <el-icon class="el-input__icon" @click="handleIconClick">
            <edit />
          </el-icon>
        </template>
        <template #default="{ item }">
          <div class="value">{{ item.value }}</div>
          <span class="link">{{ item.link }}</span>
        </template>
      </el-autocomplete>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue";

interface RestaurantItem {
  value: string;
  link: string;
}

const state1 = ref("");
const state2 = ref("");
const state = ref("");

let timeout: ReturnType<typeof setTimeout>;
const restaurants = ref<RestaurantItem[]>([]);
const querySearch = (queryString: string, cb: any) => {
  const results = queryString
    ? restaurants.value.filter(createFilter(queryString))
    : restaurants.value;
  // call callback function to return suggestions
  clearTimeout(timeout);
  timeout = setTimeout(() => {
    cb(results);
  }, 3000 * Math.random());
};
const createFilter = (queryString: string) => {
  return (restaurant: RestaurantItem) => {
    return (
      restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
    );
  };
};
const loadAll = () => {
  return [
    { value: "vue", link: "https://github.com/vuejs/vue" },
    { value: "element", link: "https://github.com/ElemeFE/element" },
    { value: "cooking", link: "https://github.com/ElemeFE/cooking" },
    { value: "mint-ui", link: "https://github.com/ElemeFE/mint-ui" },
    { value: "vuex", link: "https://github.com/vuejs/vuex" },
    { value: "vue-router", link: "https://github.com/vuejs/vue-router" },
    { value: "babel", link: "https://github.com/babel/babel" },
  ];
};

const handleSelect = (item: RestaurantItem) => {
  console.log(item);
};
const handleIconClick = (ev: Event) => {
  console.log(ev);
};
onMounted(() => {
  restaurants.value = loadAll();
});
</script>

<style scoped>
.container-autocomplete {
  padding: 20px;
}
</style>
